<template>
    <div class="pickup-section">
        <!-- 门店信息 -->
        <div class="store-card" @click="goToStoreList">
            <div class="store-info">
                <p class="store-name">{{ storeName }}</p>
                <p class="store-address">{{ storeAddress }}</p>
                <p class="store-time">营业时间：{{ storeBusinessHours }}</p>
            </div>
            <van-icon name="arrow" class="arrow-icon" />
        </div>

        <!-- 商品信息 -->
        <div class="goods-card">
            <div class="goods-item">
                <img class="goods-img" :src="goodsImage" alt="商品图" />
                <div class="goods-desc">
                    <p class="goods-name">{{ goodsName }}</p>
                    <p class="goods-price">¥{{ goodsPrice }} x {{ goodsCount }}</p>
                </div>
            </div>
        </div>

        <!-- 费用明细 -->
        <div class="fee-card">
            <div class="fee-item">
                <span>商品金额</span>
                <span class="amount">¥{{ goodsPrice }}</span>
            </div>
            <div class="fee-item">
                <span>会员折扣</span>
                <span class="discount">-¥{{ memberDiscount }}</span>
            </div>
            <div class="fee-item">
                <span>自提服务费</span>
                <span class="amount">¥{{ pickupFee }}</span>
            </div>
            <div class="fee-item remark-item">
                <span>备注</span>
                <!-- 替换为 Vant Field 组件（保持原样式） -->
                <van-field v-model="remark" placeholder="请填写备注信息" class="remark-input" />
            </div>
        </div>

        <!-- 支付方式 -->
        <div class="pay-card">
            <div class="pay-title">选择支付方式</div>
            <!-- 替换为 Vant RadioGroup + Radio 组件（保持原样式） -->
            <van-radio-group v-model="selectedPay">
                <van-radio name="wechat" class="pay-item" checked-color="#ee0a24">
                    <div class="pay-left">
                        <van-icon name="wechat" color="#07c160" size="20" class="pay-icon" />
                        <span class="pay-text">微信</span>
                    </div>
                </van-radio>
                <van-radio name="alipay" class="pay-item" checked-color="#ee0a24">
                    <div class="pay-left">
                        <van-icon name="alipay" color="#1677ff" size="20" class="pay-icon" />
                        <span class="pay-text">支付宝</span>
                    </div>
                </van-radio>
                <van-radio name="balance" class="pay-item" checked-color="#ee0a24">
                    <div class="pay-left">
                        <van-icon name="balance-o" color="#ff976a" size="20" class="pay-icon" />
                        <span class="pay-text">
                            余额
                            <span class="balance-amount">(可用:￥{{ balanceAmount }})</span>
                        </span>
                    </div>
                </van-radio>
            </van-radio-group>
            <div class="total-amount">
                实付款 ¥<span class="final-amount">{{ calculateFinalAmount }}</span>
            </div>
            <!-- 替换为 Vant Button 组件（保持原样式） -->
            <van-button round type="danger" class="submit-btn" @click="submitOrder"
                style="float: right;margin-top: 30px;">
                确认自提订单
            </van-button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
// 按需引入需要的 Vant 组件
import { Icon, Field, RadioGroup, Radio, Button } from 'vant';

const router = useRouter();

// 模拟数据
const goodsImage = ref('https://example.com/your-product-image.jpg');
const goodsName = ref('Xiaomi Civi 2 冰冰蓝 8GB+128GB');
const goodsPrice = ref(199.00);
const goodsCount = ref(1);

const storeName = ref('Apple官方旗舰店（朝阳店）');
const storeAddress = ref('北京市朝阳区建国路88号');
const storeBusinessHours = ref('9:00-22:00');

const memberDiscount = ref(0.06);
const pickupFee = ref(0.00);
const balanceAmount = ref(9320145.14);

const remark = ref('');
const selectedPay = ref('balance');

// 方法
const goToStoreList = () => {
    router.push('/store-list');
};

const calculateFinalAmount = computed(() => {
    let total = goodsPrice.value;
    total -= memberDiscount.value;
    total += pickupFee.value;
    return total.toFixed(2);
});

const submitOrder = () => {
    alert('到店自取订单提交成功！');
};
</script>

<style scoped>
/* 基础样式（完全保留你的原始代码） */
.pickup-section {
    padding: 16px;
    background-color: #f7f7f7;
    min-height: 100vh;
}

.store-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.store-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.store-address {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.store-time {
    font-size: 13px;
    color: #999;
}

.arrow-icon {
    color: #999;
}

.goods-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.goods-item {
    display: flex;
    align-items: center;
}

.goods-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
}

.goods-desc {
    flex: 1;
}

.goods-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.goods-price {
    font-size: 14px;
    color: #ee0a24;
}

.fee-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.fee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.fee-item:last-child {
    border-bottom: none;
}

.fee-item span {
    font-size: 14px;
}

.amount {
    color: #ee0a24;
}

.discount {
    color: #ee0a24;
}

.remark-item {
    align-items: flex-start;
    padding-top: 12px;
}

.remark-input {
    width: 100%;
    margin-top: -4px;
}

.pay-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 80px;
}

.pay-title {
    font-size: 14px;
    color: #999;
    margin-bottom: 12px;
}

.pay-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
}

.pay-item:last-child {
    border-bottom: none;
}

.pay-left {
    display: flex;
    align-items: center;
}

.pay-icon {
    margin-right: 10px;
}

.pay-text {
    font-size: 14px;
    color: #333;
}

.balance-amount {
    color: #ee0a24;
    margin-left: 4px;
    font-size: 13px;
}

.submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    z-index: 99;
}

.total-amount {
    font-size: 14px;
    color: #333;
}

.final-amount {
    color: #ee0a24;
    font-size: 16px;
    font-weight: 500;
}

.submit-btn {
    width: 120px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    font-size: 16px;
}
</style>